<%--
  Created by IntelliJ IDEA.
  User: xiaodoudou
  Date: 2020/10/29
  Time: 15:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%String path = request.getContextPath();%>
<html>
<head>
    <meta charset="utf-8">
    <title>注册界面</title>
    <link rel="stylesheet" href="<%=path%>/static/web/css/reset.css" />
    <link rel="stylesheet" href="<%=path%>/static/web/css/common.css" />
    <link rel="stylesheet" href="<%=path%>/static/web/css/font-awesome.min.css" />
    <script type="text/javascript" src="<%=path%>/static/web/js/jquery-3.5.1.min.js"></script>
    <c:set  var="path" value="${pageContext.request.contextPath}"></c:set>
</head>
<body>
<div class="wrap login_wrap">
    <div class="content">

        <div class="logo"></div>

        <div class="login_box">

            <div class="login_form">
                <div class="login_title">
                    用户注册😃
                </div>
                <form action="<%=path%>/registe" method="post" id="myform" >

                    <div class="form_text_ipt">
                        <input id="name" name="name" type="text" placeholder="填写手机号"><span></span>
                    </div>

                    <div class="ececk_warning" ><span>手机号已经注册过啦~</span></div>

                    <div class="form_text_ipt">
                        <input id="password" name="password" type="password" placeholder="密码(5-15位字符,组成区分大小写)">
                        <span></span>
                    </div>
                    <div class="ececk_warning"><span>密码需要满足规范呦</span></div>
                    <div>
                        <div class="form_text_ipt" style="width:130px;margin-left: 28px;float: left ">
                            <input id="code" name="code"  type="text" placeholder="验证码" style="width:80px;"  >

                        </div>
                        <div class="form_btn" style="width: 120px;margin-left: 30px;float:left">
                            <button id="getCode" type="button" style="margin-top:10px;margin-left:20px">获取验证码</button>
                        </div>
                    </div>


                    <div class="form_btn">
                        <button type="button" id="registe"  style="margin-top: 20px;">注册</button>
                    </div>
                    <div class="form_reg_btn" style="clear:both;margin-top: 80px;">
                        <span>已有帐号？</span><a href="<%=path%>/user/login">马上登录</a>
                    </div>
                </form>
                <div class="other_login">
                    <div class="left other_left">
                        <span>其它登录方式</span>
                    </div>
                    <div class="right other_right">
                        <a href="#"><i class="fa fa-qq fa-2x"></i></a>
                        <a href="#"><i class="fa fa-weixin fa-2x"></i></a>
                        <a href="#"><i class="fa fa-weibo fa-2x"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%--<script type="text/javascript" src="<%=path%>/static/web/js/jquery.min.js" ></script>--%>
<%--<script type="text/javascript" src="<%=path%>/static/web/js/common.js" ></script>--%>



<script>
  $(function () {
   //手机号失去焦点查看是否为空
      $("#name").focus(function () {
          $("#name").next().html("");
          $("#name").parent().next().css("display","none");
      });
      $("#password").focus(function () {
         $("#password").next().html("");
          $("#password").parent().next().css("display","none");
      })
   $("#name").blur(checkName);
   $("#password").blur(checkPassword);
   $("#getCode").click(getCode);
   $("#registe").click(registe);

   //判断手机号是否为空以及是否注册过
   function checkName() {
       var name = $("#name").val();
       var flag = false;
       if(name==""){
           $("#name").next().html("手机号不能为空呦~");
           $("#name").next().css("color","red");
           flag = false
           return flag;
       }
       //判断手机号格式;格式对往下走
       var text = /^1[3|4|5|7|8]\d{9}$/;
       flag = text.test(name);
       if(flag) {
           //查询是否已经注册
           $.ajax({
               url:"${path}/isExist",
               async:false,
               data:{"name":name},
               type:"post",
               success:function (mes) {
                   if(mes=="true")
                   {
                       $("#name").next().html("√");
                       flag = true;

                   }
                   if(mes=="false")
                   {
                       $("#name").parent().next().css("display","block");
                       flag = false;
                   }
               }
           });//ajax结束
           return flag;
       }
       else{
           $("#name").next().html("格式不对");
           flag = false;
         return flag;
       }

   }

   //验证密码
    function checkPassword() {
        var flag = flag;
        var password = $("#password").val();
        if(password=="")
        {
            flag = false;
            $("#password").next().html("密码不能为空呦~");
            return flag;
        }
        var text = /^\w{5,15}$/;
        var test = text.test(password);
        if(test==false)
        {
            $("#password").parent().next().css("display","block");
            flag = false;
        }
        if(test== true)
        {
            $("#password").parent().next().css("display","none");
            flag = true;
        }
        return flag;
    }

    var time = "60";
    var timeId;
   //发送短信验证码
   function getCode() {
           var flagx = false;
           var number = $("#name").val();
           var flag = checkName();
           if(flag == true){
               var timer = setInterval(function() {
                   time--;
                   $("#getCode").html("重新获取验证码"+time+"s");
                   $("#getCode").attr("disabled",true);
                   if(time == 0) {
                       time = 60;
                       clearInterval(timer);
                       $("#getCode").html("获取验证码");
                       $("#getCode").attr("disabled",false);
                   }
               }, 1000);

                       $.ajax({
                           url: "<%=path%>/sendSms",
                           async : true,
                           type: "post",
                           dataType: "json",
                           data: {"number":number},
                           success: function (data)
                           {
                               alert(data);
                               if(data == 'fail')
                               {
                                   alert("发送验证码失败");
                                   flagx = false;
                               }
                               alert("发送验证码成功");
                               flagx = true;
                           }
                       });//ajax结束
                       return flagx;
                   }

           }





   //验证码验证
      function registe() {

       var flag1 = checkName();
       var flag2 = checkPassword();
       var code = $("#code").val();
       if(code!=""){
           if(flag1&&flag2) {
               var number = $("#name").val();
               var password = $("#password").val();
               $.ajax({
                   url: "<%=path%>/checkCode",
                   async : true,
                   type: "post",
                   data: {"number":number,"password":password,"verifyCode":code},
                   success: function (data)
                   {
                       if(data == '验证码错误')
                       {
                           alert("验证码错误");
                           return ;
                       }
                       if(data == '验证码过期')
                       {
                           alert("验证码过期");
                           return ;
                       }
                       alert("注册成功");
                       $("#myform").submit();
                       return;
                   }
               });//ajax结束
           }
       }
      }

  });//网页加载结束
</script>
</body>
</html>
